<template>
  <div class="app-container">
    <el-card shadow="never" class="search-card-box">
      <!-- dispatch调度 -->
      <el-form ref="dispatchForm" :model="dispatchForm" label-width="80px">
        <el-row :gutter="60">
          <el-col :span="8">
            <el-form-item label="任务编号:" style="margin-bottom: 20px">
              <el-input placeholder="请输入任务编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="assignedStatus" label="任务分配状态:" style="margin-bottom: 20px" label-width="110px">
              <el-select v-model="dispatchForm.id" placeholder="请选择">
                <el-option v-for="item in taskAllocation" :key="item.id" :label="item.state" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="loadingStatus" label="满载状态:" style="margin-bottom: 20px" label-width="110px">
              <el-select v-model="dispatchForm.fullLoad" placeholder="请选择">
                <el-option v-for="item in fullLoad" :key="item.id" :label="item.state" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="licensePlate" label="车牌号码:" style="margin-bottom: 0px">
              <el-input v-model="dispatchForm.licensePlate" placeholder="请输入车牌号码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="startAgencyId" label="起始地机构:" style="margin-bottom: 20px" label-width="110px">
              <el-select v-model="dispatchForm.startAgencyId" style="width: 100%" placeholder="请选择起始地机构" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="endAgencyId" label="目的地机构:" style="margin-bottom: 20px" label-width="110px">
              <el-select v-model="dispatchForm.endAgencyId" style="width: 100%" placeholder="请选择目的地机构" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="warning">搜索</el-button>
            <el-button plain class="reset-btn">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 选项卡 -->
    <div class="tab-control">
      <el-menu
        :default-active="activeIdex"
        mode="horizontal"
        style="height:100%"
        @select="menuSelect"
      >
        <el-row style="height: 100%">
          <el-col style="height: 100%" :span="2">
            <el-menu-item style="height: 100%" index="1">
              <span>全部</span>
            </el-menu-item>
          </el-col>
          <el-col style="height: 100%" :span="2">
            <el-menu-item style="height: 100%" index="2">
              <span>待提货</span>
            </el-menu-item>
          </el-col>
          <el-col style="height: 100%" :span="2">
            <el-menu-item style="height: 100%" index="3">
              <span>进行中</span>
            </el-menu-item>
          </el-col>
          <el-col style="height: 100%" :span="2">
            <el-menu-item style="height: 100%" index="4">
              <span>已完成</span>
            </el-menu-item>
          </el-col>
          <el-col style="height: 100%" :span="2">
            <el-menu-item style="height: 100%" index="5">
              <span>已取消</span>
            </el-menu-item>
          </el-col>
        </el-row>
      </el-menu>
    </div>

    <!-- 表格区域 -->
    <template>
      <el-card style="margin-top: 20px">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="{ background: '#f8faff', color: '#818693' }"
        >
          <el-table-column type="index" label="序号" width="60">
            <!-- <template slot-scope="scope">
              <span></span>
            </template> -->
          </el-table-column>
          <el-table-column prop="Transportnumber" label="运输任务编号" width="180" />
          <el-table-column prop="licensePlate" label="车牌号码" width="100" />
          <el-table-column prop="startAgency" label="起始地" width="150" />
          <el-table-column prop="endAgency" label="目的地" width="170" />
          <el-table-column prop="status" label="运输任务状态" width="120" />
          <el-table-column prop="loadingStatus" label="车辆装载状态" width="120" />
          <el-table-column prop="assignedStatus" label="任务分配状态" width="120" />
          <el-table-column prop="planDepartureTime" label="计划发车时间" width="160" />
          <el-table-column prop="actualDepartureTime" label="实际发车时间" width="160" />
          <el-table-column prop="updated" label="更新时间" width="160" />
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
              <el-button type="text" size="small" @click="handleClick(scope.row)">取消</el-button>
              <el-button type="text" size="small" @click="handleClick(scope.row)">手动调整</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :current-page="+requestParameters.size"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="+requestParameters.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="500"
            style="margin-top:20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>
    </template>
  </div>
</template>

<script>
import { transportListPage } from '@/api/Transport-interface'
export default {
  data() {
    return {
      total: '',
      taskAllocation: [
        { id: 1, state: '已分配' },
        { id: 2, state: '待人工分配' }
      ],
      fullLoad: [
        { id: 3, state: '满载' },
        { id: 4, state: '空载' }
      ],
      dispatchForm: {
        taskAllocation: '',
        fullLoad: ''
      },
      tableData: [],
      requestParameters: {
        size: 1,
        pagesize: 10
      },
      activeIdex: '1',
      // 表数据
      data: {
        assignedStatus: '',
        endAgencyId: null,
        id: '',
        licensePlate: '',
        loadingStatus: '',
        page: 1,
        pageSize: 10,
        planDeliveryTime: '',
        startAgencyId: null,
        status: null
      }
    }
  },
  created() {
    this.transportListPage() // 调用获取数据的接口
  },
  methods: {
    async transportListPage() {
      const { items } = await transportListPage(this.data)
      this.tableData = items
      console.log(this.tableData)
    },
    handleClick(row) {
      console.log(row)
    },
    menuSelect() {},
    // 分页栏
    handleSizeChange() {
    },
    handleCurrentChange() {
    }
  }
}
</script>

<style lang='scss' scoped>
.tab-control{
  margin: 20px 0 0 0;
  height: 48px;
  .is-active {
    color: #e7775e;
    background-color: #ffeeeb;
    border-bottom-color: none;
  }
  .el-menu-item:not(.is-disabled):focus,
  .el-menu-item:not(.is-disabled):hover {
    outline: 0;
    color: #e7775e;
  }
  .el-menu-item {
    height: 100%;
    line-height: 48px;
    font-size: 14px;
    text-align: center;
    span {
      padding: 0 2px;
      font-weight: 700;
    }
  }
}
</style>
